<template>
<div>
	<card :header="{title: article.title }">
  <p slot="content" class="card-padding" v-html="article.content"></p>
	</card>
</div>
</template>



<script>
import { Divider, Card } from 'vux'
import { article as articleAPI } from '@/server/getData'

export default {
  components: {
    Divider,
    Card
  },
  data () {
    return {
      article: []
    }
  },
  created () {
    this.initData()
  },
  watch: {
    '$route' (to, from) {
      this.getArticle()
    }
  },
  methods: {
    async initData () {
      this.getArticle()
    },
    async getArticle () {
      let {success, data} = await articleAPI.fetchArticle(this.$route.params.id)
      !success && this.$vux.alert.show({
        title: '错误提示',
        content: data.message
      })
      this.article = data
    }
  }
}
</script>

<style lang="less">
.card-padding {
  padding: 15px;
}
.card-padding img{
  width: 100%;
}
</style>
